<template>
  <f7-page>
    <f7-navbar title="Hotel" back-link="Back"></f7-navbar>
    <f7-block class="check">
      <f7-login-screen-title>顾客入住</f7-login-screen-title>
    </f7-block>
    <div class="div1">
      <div class="checkin">
        <img src="@/assets/checkin/weiyuding.svg" @click="weiyuding" class="img2">
        <p>未预定</p>
      </div>
      <div class="checkin">
        <img src="@/assets/checkin/yuding.svg" @click="yuding" class="img2">
        <p>预定</p>
      </div>
    </div>
    <f7-block-title class="dibu">Hotle版权所有</f7-block-title>
  </f7-page>
</template>
<script>
export default {
  methods: {
    weiyuding() {
      this.$f7router.navigate("/notcheckin/");
    },
    yuding() {
      this.$f7router.navigate("/reservationcheckin/");
    }
  }
};
</script>
<style  scoped>
.dibu {
  color: #b4b4b4;
  text-align: center;
  display: inline-block;
  width: 90%;
  position: absolute;
  bottom: 5%;
}
p {
  font-size: 20px;
}
.checkin {
  text-align: center;
  height: 50%;
}
.img2 {
  width: 20%;
}
.div1 {
  height: 50%;
  margin-top: 15%;
}
</style>
